import { Component, Input, OnInit } from '@angular/core';
import { ApesModalRef } from '@shared/apes/modal';
import { deepClone } from '../../utils/utils';

@Component({
  selector: 'assembly-drawing-infoDialog',
  template: `
    <ng-container *ngFor="let model of multiModel; let i = index;" >
      <div class="infoDialog-multiModel" [ngClass]="{'infoDialog-multiModel-select' : select == i}" (click)="selectModel(model,i);">
        <div class="infoDialog-model" *ngFor="let data of model">
          <div class="infoDialog-model-key">{{data.key}}</div>
          <div class="infoDialog-model-value">{{data.value}}</div>
        </div>
      </div>
    </ng-container>
    
  `,
  styles: [`
    .infoDialog-multiModel {
      border: 1px solid #b7b7b7;
      border-radius: 5px;
      position: relative;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      cursor: pointer;
    }
    .infoDialog-multiModel-select {
      border: 1px solid #0589DD;
    }
    .infoDialog-model {
      padding: 8px;
      max-width: 200px;
      text-align: center;
    }

    .infoDialog-model-key {
      font-weight: bold;
      padding: 5px;
      text-align: center;
    }

    .infoDialog-model-value {
      line-height: 1;
      text-align: center;
    }
  `],
})
export class AssemblyDrawingInfoDialogComponent implements OnInit {

  @Input() modelData: any = {};
  multiModel: any;
  resData: any = {};
  select: any;
  selectorId: any = '';

  constructor(
    private modal: ApesModalRef,
  ) {
  }

  ngOnInit() {
    console.log(this);
    this.multiModel = this.destructionData(this.modelData['multiModel']);
    this.resData = deepClone(this.modelData);
    delete this.resData['multiModel'];
  }

  destructionData(data) {
    let resData = []
    console.log(this.modelData['multiModel']);
    data['content'].forEach((c) => {
      let con = [];
      data['header'].forEach((h) => {
          let r = {
            value: c[h['key']],
            key: h['value']
          };
          con.push(r);
        },
      );
      resData.push(con);
    });
    return resData;
  };

  selectModel(data,i) {
    this.select = i;
    this.selectorId = this.modelData['multiModel']['content'][i].selectorId;
    this.resData['selectorId'] = this.selectorId;
  }

  destroyModal(): void {
    this.modal.destroy(this.selectorId);
  }

}
